<!--
  * 分医馆 value 弹窗
  * 
  * @Author:    小钟同学 
  * @Date:      2022-06-08 21:50:41 
  * @Wechat:    zhuda1024 
  * @Email:     lab1024@163.com 
  * @Copyright  小钟同学 （ https://1024lab.net ），Since 2012 
-->
<template>
    <a-drawer :width="1000" :visible="visible" :body-style="{ paddingBottom: '80px' }" title="驻点医馆"
              @close="onClose">
        <a-form class="smart-query-form">
            <a-row class="smart-query-form-row">
                <a-form-item :label="DoctorRecordNameTitle" class="smart-query-form-item">
                    <a-input style="width: 300px" v-model:value="queryForm.name" placeholder="请输入驻点医馆名称"/>
                </a-form-item>

                <a-form-item class="smart-query-form-item smart-margin-left10">
                    <a-button type="primary" @click="ajaxQuery">
                        <template #icon>
                            <ReloadOutlined/>
                        </template>
                        查询
                    </a-button>
                    <a-button @click="resetQuery">
                        <template #icon>
                            <SearchOutlined/>
                        </template>
                        重置
                    </a-button>
                </a-form-item>
            </a-row>
        </a-form>

        <a-card size="small" :bordered="false">

            <a-table
                    size="small"
                    :dataSource="tableData"
                    :columns="columns"
                    rowKey="dictValueId"
                    :pagination="false"
                    bordered
            >
                <template #bodyCell="{ record, column }">
                    <template v-if="column.dataIndex === 'action'">
                        <a-button @click="showBusinessesDoctorAddConfifgSchedulingRuleDrawer(record,DoctorRecord)"
                                  type="link">新增配置
                        </a-button>
                        <a-button @click="showBusinessesDoctorSchedulingRuleDrawer(record,DoctorRecord)" type="link">
                            修改配置
                        </a-button>
                    </template>

                    <template v-if="column.dataIndex === 'is_opened'">
                        <a-tag :color="record.is_opened==0 ? 'error' : 'orange'">
                            {{ record.is_opened == 0 ? '禁用' : '启用' }}
                        </a-tag>
                    </template>
                    <template v-if="column.dataIndex === 'status'">
                        <a-tag :color="record.status==0 ? 'error' : 'processing'">{{
                            record.status == 0 ? '禁用' : '启用'
                            }}
                        </a-tag>
                    </template>
                </template>
            </a-table>

            <div class="smart-query-table-page">
                <a-pagination
                        showSizeChanger
                        showQuickJumper
                        show-less-items
                        :pageSizeOptions="PAGE_SIZE_OPTIONS"
                        :defaultPageSize="queryForm.pageSize"
                        v-model:current="queryForm.pageNum"
                        v-model:pageSize="queryForm.pageSize"
                        :total="total"
                        @change="ajaxQuery"
                        @showSizeChange="ajaxQuery"
                        :show-total="(total) => `共${total}条`"
                />
            </div>
        </a-card>
        <InfirmaryStationFormModal ref="infirmaryStationFormModal" @reloadList="ajaxQuery"/>
        <DoctorSchedulingRuleFormModal ref="doctorSchedulingRuleFormModal" @reloadList="ajaxQuery"/>
    </a-drawer>
</template>
<script setup lang="ts">
import {reactive, ref} from 'vue';
// import DictValueOperateModal from '../dict-value-operate-modal.vue';
import {PAGE_SIZE_OPTIONS} from '/@/constants/common-const';
import {businessesApi} from '/@/api/system/infirmary/businesses-api';
import {SmartLoading} from '/@/components/framework/smart-loading';
import {Modal} from 'ant-design-vue';
import {message} from 'ant-design-vue';
import {smartSentry} from '/@/lib/smart-sentry';
import InfirmaryStationFormModal from '../infirmary-station-form_modal/index.vue';
import DoctorSchedulingRuleFormModal from '../doctor-scheduling-rule-form-modal/index.vue';

// 是否展示抽屉
const visible = ref(false);
// 渠道ID
const Appid = ref(undefined);

// 医生实体记录
const DoctorRecord = ref(undefined);

const DoctorRecordNameTitle = ref(undefined);
const DoctorRecordName = ref(undefined);

function showModal(record, appid) {
    Appid.value = appid;
    DoctorRecord.value = record;
    DoctorRecordNameTitle.value = "【" + record.name + "】" + "---驻点医馆"
    visible.value = true;
    ajaxQuery();
    DoctorRecordName.value = record.name
}

function onClose() {
    visible.value = false;
    Appid.value = undefined;
    DoctorRecord.value = undefined;
}

const columns = reactive([
    {
        title: 'id',
        width: 50,
        dataIndex: 'id',
    },
    {
        title: '名称',
        dataIndex: 'si_name',
        width: 150,
    },
    {
        title: '医生名称',
        dataIndex: 'dc_name',
        width: 120,
    },
    {
        title: '编号',
        dataIndex: 'si_number',
        width: 120,
    },
    {
        title: '地址',
        dataIndex: 'addr',
        width: 150,
        ellipsis: true,
    },
    {
        title: '开启',
        width: 60,
        dataIndex: 'is_opened',
    },
    {
        title: '状态',
        width: 60,
        dataIndex: 'status',
    },

    {
        title: '操作',
        dataIndex: 'action',
        fixed: 'right',
        width: 200,
    },
]);

// ----------------------- 表格 查询 ------------------------

const queryFormState = {
    name: '',
    // appid: '',
    pageNum: 1,
    pageSize: 10,
};
const queryForm = reactive({...queryFormState});
const selectedRowKeyList = ref([]);
const tableLoading = ref(false);
const tableData = ref([]);
const total = ref(0);

const infirmaryStationFormModal = ref();
const doctorSchedulingRuleFormModal = ref();

// 显示操作记录弹窗
function showInfirmaryStationFormModal(appid, Pappid) {
    Pappid = Appid
    infirmaryStationFormModal.value.showDrawer(appid, Pappid);
}

function onSelectChange(selectedRowKeys) {
    selectedRowKeyList.value = selectedRowKeys;
}

function showBusinessesDoctorSchedulingRuleDrawer(StationRecord, DoctorRecord) {
    SmartLoading.show();
    doctorSchedulingRuleFormModal.value.showDrawer(StationRecord, DoctorRecord, false);
    SmartLoading.hide();
}


function showBusinessesDoctorAddConfifgSchedulingRuleDrawer(StationRecord, DoctorRecord) {
    SmartLoading.show();
    doctorSchedulingRuleFormModal.value.showDrawer(StationRecord, DoctorRecord, true);
    SmartLoading.hide();
}


function resetQuery() {
    Object.assign(queryForm, queryFormState);
    ajaxQuery();
}

async function ajaxQuery() {
    try {
        tableLoading.value = true;
        queryForm.appid = Appid;
        // console.log("输AAAAAAAAAAAA出",Appid,queryForm.appid)
        // 查询对应的驻点医馆列表信息
        let responseModel = await businessesApi.postBusinessesStationListQuery(queryForm);
        const list = responseModel.data.list;
        total.value = responseModel.data.total;
        // 遍历列表中的对象
        for (var i = 0; i < list.length; i++) {
            var obj = list[i];
            // 添加新的age属性
            obj.dc_name = DoctorRecordName.value; // 这里可以根据需要设置合适的年龄值
        }
        tableData.value = list;
    } catch (e) {
        smartSentry.captureError(e);
    } finally {
        tableLoading.value = false;
    }
}

// ----------------------- 批量 删除 ------------------------

function confirmBatchDelete() {
    Modal.confirm({
        title: '提示',
        content: '确定要删除选中值吗?',
        okText: '删除',
        okType: 'danger',
        onOk() {
            // batchDelete();
        },
        cancelText: '取消',
        onCancel() {
        },
    });
}


// ----------------------- 弹窗表单操作 ------------------------

// const operateModal = ref();
// function addOrUpdateValue(rowData) {
//   operateModal.value.showModal(rowData, dictKeyId.value);
// }

defineExpose({
    showModal,
});
</script>
